<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>
      {% block title %}

      {% endblock %}| Cookbook
    </title>
  </head>

  <body>
    <div>
      <nav class="py-6 px-6 flex justify-between border-b border-gray-700 bg-green-900">
        <a href="/" class="display-1 text-xl text-gray-100 font-bold">Cookbook</a>
        <div class="space-x-6">
          <a href="{% url 'recipe:browse' %}" class="text-lg font-semibold text-gray-100 hover:text-gray-400">Поиск</a>
          <a href="{% url 'recipe:new_recipe' %}" class="text-lg font-semibold text-gray-100 hover:text-gray-400">Новый рецепт</a>
          {% if request.user.is_authenticated %}
            <a href="{% url 'dashboard:index' %}" class="text-lg font-semibold text-gray-100 hover:text-gray-700">Мои рецепты</a>
            <a href="{% url 'chat:chats' %}" class="px-6 py-3 text-lg font-semibold bg-green-700 text-white rounded-xl hover:bg-gray-500">Чаты</a>
            <a href="{% url 'core:logout' %}" class="px-6 py-3 text-lg font-semibold bg-gray-500 text-white rounded-xl hover:bg-gray-400">Выйти</a>
          {% else %}
            <a href="{% url 'core:signup' %}" class="px-6 py-3 text-lg font-semibold bg-green-700 text-white rounded-xl hover:bg-gray-500">Регистрация</a>
            <a href="{% url 'core:login' %}" class="px-6 py-3 text-lg font-semibold bg-gray-500 text-white rounded-xl hover:bg-gray-400">Войти</a>
          {% endif %}
        </div>
      </nav>
    </div>
    <div class="bg-green-100">
      <div class="p-1 min-h-screen">
        {% block content %}

        {% endblock %}
      </div>
    </div>
    <footer class="py-6 px-6 flex justify-between bg-gray-800">
      <div class="w-2/3 pr-10">
        <h3 class="mb-5 font-semibold text-gray-400">About</h3>

        <p class="text-lg text-gray-400">Lorem ipsum bla bla bla. Lorem ipsum bla bla bla. Lorem ipsum bla bla bla.</p>
      </div>

      <div class="w-1/3">
        <h3 class="mb-5 font-semibold text-gray-400">Menu</h3>

        <ul class="space-y-2">
          <li>
            <a href="#" class="text-lg text-green-700 hover:text-green-400">About</a>
          </li>
          <li>
            <a href="#" class="text-lg text-green-700 hover:text-green-400">Contact</a>
          </li>
        </ul>
      </div>
    </footer>
  </body>
</html>
